<script>
import Number from './components/Number.vue'
import Parent from './components/Parent.vue'
export default {
  components: {
    Number,
    Parent
  },
  data () {
    return {
      carts: [
        {
          'id': 1,
          'productName': '联想拯救者手机2 Pro 12GB+128GB',
          'price': 4099,
          'count': 2,
          'pic': 'https://img10.360buyimg.com/seckillcms/s500x500_jfs/t1/172009/35/22562/106520/61384ee4E46112533/8e41e77065dbb2de.jpg'
        },
        {
          'id': 2,
          'productName': '华为笔记本电脑MateBook X Pro 2021款13.9英寸11代酷睿i7 16G 512G 锐炬显卡/3K触控全面屏/多屏协同 翡冷翠',
          'price': 9999,
          'count': 1,
          'pic': 'https://img12.360buyimg.com/n7/jfs/t1/150573/15/14407/49229/5ff52adbEb60af95b/49f9d6bc5ea03744.jpg'
        },
      ]
    }
  }
}
</script>

<template>
  <parent></parent>
  <!-- <header class="header">
    <h2>熊猫商城</h2>
    <nav class="nav">
      <ul class="nav-links">
        <li class="link">
          <a href="./product-list.html">所有商品</a>
        </li>
        <li class="link">
          <a href="/notebooks">电脑</a>
        </li>
        <li class="link">
          <a href="/smartphones">手机</a>
        </li>
      </ul>
    </nav>
  </header>

  <div class="checkout-box">
    <ul class="checkout-list">
      <li
        v-for="cart in carts"
        :key="cart.id"
        class="checkout-product">
        <img
          :src="cart.pic"
          alt=""
          class="cart-product-image"
        />
        <h3 class="cart-product-name">
          {{ cart.productName }}
        </h3>
        <span>单价：{{ cart.price }}¥</span>
        <number v-model="cart.count"></number>
        <span class="cart-product-price">小计：{{ cart.price * cart.count }}¥</span>
        <button class="product-remove">X</button>
      </li>
    </ul>
  </div> -->

  <!-- <number @update="handleUpdate(cart, $event)" :count="cart.count"></number> -->
</template>

<style>
</style>
